<!-- 
	有前后间距的轮播图
	不支持nvue，
	实现方式：uni-app previous-margin，next-margin属性控制
		默认外层宽度750rpx 需要显示的图片尺寸为630rpx,需要显示两边轮播图漏出的间距为30rpx
		计算方式:1.计算两边间距和750-630=120
				2.计算两个图片之间的间距，两边间距一半减去漏出尺寸120/2-30=30
				3.图片间距两部分，拆成两部分，为图片外边距：30/2=15
				4.最后的previous-margin和next-margin为30+15=45
 -->
<template>
  <swiper
    class="imageContainer"
    circular
    previous-margin="30upx"
    next-margin="30upx"
    :autoplay="autoplay"
    v-if="show"
  >
    <swiper-item
      class="swiperitem"
      v-for="(item, index) in imgList"
      :key="index"
      @click="to(item)"
    >
      <image class="itemImg" :src="item.photoFile"></image>
    </swiper-item>
  </swiper>
</template>
<script>
export default {
  data() {
    return {
      imgList: [],
      show: false,
	  autoplay:true
    };
  },
  methods: {
    to(v) {
      uni.navigateTo({
        url: "/pages/newsdetail/newsdetail?scenicId=" + v.scenicId,
      });
    },
    getlist() {
      this.$http
        .get(
          "/scenicIntroduce/list",
          {
            scenicStatus: 2,
          },
          {
            header: {
              "content-type": "application/json;charset=UTF-8",
            } /* 会覆盖全局header */,
            dataType: "json",
            responseType: "text",
          }
        )
        .then((res) => {
          let data = res.data;
          if (data.code == 0) {
			  this.imgList = data.data;	
			  if(data.data.length<3){
					this.autoplay=true;
				  if(data.data.length==2){
					 this.imgList.push( data.data[0]);
					 this.imgList.push( data.data[1]); 
				  }
			  }else{
				  this.autoplay=true;
			  }							
				this.show = true;
								
          } else {
            uni.showToast({
              image: "/static/img/warn.png",
              title: data.msg,
              duration: 2000,
              mask: true,
            });
          }
        });
    },
  },
  mounted() {
    console.log(34344);
    this.getlist();
  },
};
</script>
<style scoped>
.imageContainer {
  width: 750rpx;
  height: 200upx;
}
.itemImg {
  border-radius: 16upx;
  width: 90% !important;
  height: 100%;
  float: left;
  box-shadow: -2px 3px 4px 2px #e5e5e5, 2px -3px 4px 0px #e5e5e5;
}
.swiperitem {
  width: calc(50% - 24upx) !important;
  height: 147upx !important;
  border-radius: 16upx;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding-top: 24upx;
  padding-bottom: 24upx;
}
</style>
